<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>名片管理系统 - 主界面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .header {
      background-color: #007bff;
      color: white;
      padding: 15px 0;
      text-align: center;
    }

    .welcome {
      text-align: center;
      margin: 20px 0;
    }

    .overview {
      background-color: white;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    
    .overview table {
      width: 100%;
      border-collapse: collapse;
    }
    
    .overview table th, 
    .overview table td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }
    
    .overview table th {
      background-color: #f8f9fa;
      font-weight: bold;
    }

    .actions {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    .action-item {
      background-color: white;
      padding: 15px;
      margin: 10px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      width: 180px;
      cursor: pointer;
    }

    .action-item:hover {
      background-color: #f0f0f0;
    }

    .action-item a {
      color: #007bff;
      text-decoration: none;
    }

    .action-item a:hover {
      text-decoration: underline;
    }
    
    .loading {
      text-align: center;
      padding: 20px;
      font-style: italic;
      color: #666;
    }
  </style>
</head>

<body>
  <div class="header">
    <h1>名片管理系统</h1>
    <button id="logoutBtn" style="position: absolute; right: 20px; top: 15px; background: white; color: #007bff; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer;">退出</button>
  </div>
  <div class="container">
    <div class="welcome">
      <h2 id="welcomeMessage">欢迎，用户</h2>
      <p>您当前有 <strong>0</strong> 张名片，分布在 <strong>0</strong> 个名片夹中</p>
    </div>
    
    <div class="overview">
      <h3>名片夹概览</h3>
      <div id="overview-content">
        <div class="loading">正在加载名片夹数据...</div>
        <table style="display: none;">
          <thead>
            <tr>
              <th>名片夹名称</th>
              <th>名片数量</th>
              <th>最后更新</th>
            </tr>
          </thead>
          <tbody>
            <!-- 数据将通过JavaScript动态加载 -->
          </tbody>
        </table>
      </div>
    </div>
    
    <div class="actions">
      <div class="action-item">
        <h4>新增名片</h4>
        <p>逐片录入名片信息</p>
        <a href="add-card.html">进入</a>
      </div>
      <div class="action-item">
        <h4>批量录入</h4>
        <p>一次性录入多张名片</p>
        <a href="batch-input.html">进入</a>
      </div>
      <div class="action-item">
        <h4>批量导入</h4>
        <p>从文件导入名片信息</p>
        <a href="batch-import.html">进入</a>
      </div>
      <div class="action-item">
        <h4>查找名片</h4>
        <p>搜索特定名片</p>
        <a href="../4/search.html">进入</a>
      </div>
      <div class="action-item">
        <h4>打印名片</h4>
        <p>打印所选名片</p>
        <a href="../4/print-preview.html">进入</a>
      </div>
      <div class="action-item">
        <h4>权限设置</h4>
        <p>设置系统权限</p>
        <a href="../3/permission-settings.html">进入</a>
      </div>
      <div class="action-item">
        <h4>名片夹管理</h4>
        <p>管理您的名片夹</p>
        <a href="folder-management.html">进入</a>
      </div>
      <div class="action-item">
        <h4>回收站</h4>
        <p>查看已删除的名片和名片夹</p>
        <a href="recycle-bin.html">进入</a>
      </div>
    </div>
  </div>

  <!-- 引入API文件和主脚本 -->
  <script src="js/api.js"></script>
  <script src="js/main.js"></script>
  <script>
    // 初始化显示
    document.addEventListener('DOMContentLoaded', () => {
      // 表格初始化
      setTimeout(() => {
        document.querySelector('.loading').style.display = 'none';
        document.querySelector('.overview table').style.display = 'table';
      }, 300); // 添加一点延迟让加载效果显示出来
    });
  </script>
</body>

</html>